/**
 * Descriptions：
 * <p>
 * Author：ChenME
 * Date：2017/6/28
 * Email：ibelieve1210@163.com
 */

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
} from 'react-native';

import MidDataJson from './MidDataJson.json';

class MineMidView extends Component {
    render() {
        return (
            <View style={styles.itemStyle}>
                {this.renderInnerView()}
            </View>
        );
    }

    renderInnerView() {
        let itemArr = [];
        for (let i = 0; i < MidDataJson.length; i++) {
            let data = MidDataJson[i];
            itemArr.push(
                <InnerView
                    key={i}
                    iconUri={data.iconUri}
                    itemName={data.itemName}
                />
            )
        }
        return itemArr;
    }
}


class InnerView extends Component {

    static defaultProps = {
        iconUri: '',
        itemName: '',
    };

    render() {
        return (
            <View style={styles.innerItemStyle}>
                <Image
                    source={{uri: this.props.iconUri}}
                    style={styles.innerItemIconStyle}
                />
                <Text>{this.props.itemName}</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    itemStyle: {
        flexDirection: 'row',
        backgroundColor: '#fff',
        borderBottomColor: '#ddd',
        borderBottomWidth: 0.5,
        alignItems: 'center',
        paddingHorizontal: 10,
    },

    innerItemStyle: {
        paddingVertical: 10,
        flex: 1,
        alignItems: 'center',
    },

    innerItemIconStyle: {
        width: 30,
        height: 20,
    },
});

export {MineMidView};